<template>
  <div class="daily_TrainTicket-container">
    <div class="header">
      <h1 class="title">余票信息管理</h1>
      <p class="subtitle">余票信息信息管理，包括id、日期、车次编号、出发站、出发站拼音、出发时间、出发站序、到达站、到达站拼音、到站时间、到站站序、一等座余票、一等座票价、二等座余票、二等座票价、软卧余票、软卧票价、硬卧余票、硬卧票价、新增时间、修改时间</p>
    </div>

    <a-card class="operation-card">
      <div class="operation-bar">
        <a-space>
          <a-date-picker v-model:value="params.date" valueFormat="YYYY-MM-DD" placeholder="请选择日期" />
          <train-select-view v-model="params.trainCode" width="200px"></train-select-view>
          <station-select-view v-model="params.start" width="200px"></station-select-view>
          <station-select-view v-model="params.end" width="200px"></station-select-view>
          <a-button type="primary" @click="handleQuery()" class="refresh-btn">
            <template #icon><search-outlined /></template>
            查询
          </a-button>
        </a-space>
        <div class="statistics">
          <div class="stat-item">
            <dashboard-outlined />
            <span>余票信息总数: {{ pagination.total }}</span>
          </div>
        </div>
      </div>
    </a-card>

    <a-card class="table-card">
      <a-table
        :dataSource="daily_TrainTickets"
        :columns="columns"
        :pagination="pagination"
        @change="handleTableChange"
        :loading="loading"
        :locale="{ emptyText: '暂无余票信息数据' }"
        rowKey="id"
        bordered
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'operation'">
          </template>
          <template v-else-if="column.dataIndex === 'station'">
            {{record.start}}<br/>
            {{record.end}}
          </template>
          <template v-else-if="column.dataIndex === 'time'">
            {{record.startTime}}<br/>
            {{record.endTime}}
          </template>
          <template v-else-if="column.dataIndex === 'duration'">
            {{calDuration(record.startTime, record.endTime)}}<br/>
            <div v-if="record.startTime.replaceAll(':', '') >= record.endTime.replaceAll(':', '')">
              次日到达
            </div>
            <div v-else>
              当日到达
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'ydz'">
            <div v-if="record.ydz >= 0">
              余票：{{record.ydz}}张<br/>
              票价：{{record.ydzPrice}}￥
            </div>
            <div v-else>
              --
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'edz'">
            <div v-if="record.edz >= 0">
              余票：{{record.edz}}张<br/>
              票价：{{record.edzPrice}}￥
            </div>
            <div v-else>
              --
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'rw'">
            <div v-if="record.rw >= 0">
              余票：{{record.rw}}张<br/>
              票价：{{record.rwPrice}}￥
            </div>
            <div v-else>
              --
            </div>
          </template>
          <template v-else-if="column.dataIndex === 'yw'">
            <div v-if="record.yw >= 0">
              余票：{{record.yw}}张<br/>
              票价：{{record.ywPrice}}￥
            </div>
            <div v-else>
              --
            </div>
          </template>
        </template>
      </a-table>
    </a-card>

  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from 'vue';
import { notification } from "ant-design-vue";
import axios from "axios";
import {
 DashboardOutlined
} from '@ant-design/icons-vue';
import TrainSelectView from "@/components/train-select.vue";
import StationSelectView from "@/components/station-select.vue";
import dayjs from "dayjs";

export default defineComponent({
  name: "daily_TrainTicket-view",
  components: {
    StationSelectView,
    TrainSelectView,
    DashboardOutlined
  },
  setup() {
    const visible = ref(false);
    let daily_TrainTicket = ref({
      id: undefined,
      date: undefined,
      trainCode: undefined,
      start: undefined,
      startPinyin: undefined,
      startTime: undefined,
      startIndex: undefined,
      end: undefined,
      endPinyin: undefined,
      endTime: undefined,
      endIndex: undefined,
      ydz: undefined,
      ydzPrice: undefined,
      edz: undefined,
      edzPrice: undefined,
      rw: undefined,
      rwPrice: undefined,
      yw: undefined,
      ywPrice: undefined,
      createTime: undefined,
      updateTime: undefined
    });
    const daily_TrainTickets = ref([]);
    const pagination = ref({
      total: 0,
      current: 1,
      pageSize: 10,
    });
    let loading = ref(false);
    let params=ref({
      trainCode:null,
      date:null,
      start:null,
      end:null
    })
    const columns = [
      {
        title: '日期',
        dataIndex: 'date',
        key: 'date',
      },
      {
        title: '车次编号',
        dataIndex: 'trainCode',
        key: 'trainCode',
      },
      {
        title: '车站',
        dataIndex: 'station',
      },
      {
        title: '时间',
        dataIndex: 'time',
      },
      {
        title: '历时',
        dataIndex: 'duration',
      },
      {
        title: '一等座余票',
        dataIndex: 'ydz',
        key: 'ydz',
      },
      {
        title: '二等座余票',
        dataIndex: 'edz',
        key: 'edz',
      },
      {
        title: '软卧余票',
        dataIndex: 'rw',
        key: 'rw',
      },
      {
        title: '硬卧余票',
        dataIndex: 'yw',
        key: 'yw',
      },
    ];


    const handleQuery = (param) => {
      if (!param) {
        param = {
          page: 1,
          size: pagination.value.pageSize
        };
      }
      loading.value = true;
      axios.get("/business/admin/daily_TrainTicket/query-list", {
        params: {
          page: param.page,
          size: param.size,
          trainCode:params.value.trainCode,
          date:params.value.date,
          start:params.value.start,
          end:params.value.end
        }
      }).then((response) => {
        loading.value = false;
        let data = response.data;
        if (data.success) {
          daily_TrainTickets.value = data.content.list;
          pagination.value.current = param.page;
          pagination.value.total = data.content.total;
        } else {
          notification.error({description: data.message});
        }
      }).catch(() => {
        loading.value = false;
      });
    };

    const handleTableChange = (pagination) => {
      handleQuery({
        page: pagination.current,
        size: pagination.pageSize
      });
    };
    const calDuration = (startTime, endTime) => {
      let diff = dayjs(endTime, 'HH:mm:ss').diff(dayjs(startTime, 'HH:mm:ss'), 'seconds');
      return dayjs('00:00:00', 'HH:mm:ss').second(diff).format('HH:mm:ss');
    };

    onMounted(() => {
      handleQuery({
        page: 1,
        size: pagination.value.pageSize
      });
    });

    return {
      daily_TrainTicket,
      visible,
      daily_TrainTickets,
      pagination,
      columns,
      handleTableChange,
      handleQuery,
      loading,
      params,
      calDuration
    };
  },
});
</script>

<style scoped>
.daily_TrainTicket-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.header {
  margin-bottom: 24px;
  text-align: center;
}

.title {
  font-size: 28px;
  font-weight: 600;
  color: #1f2f3d;
  margin-bottom: 8px;
  background: linear-gradient(90deg, #1890ff, #722ed1);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.subtitle {
  color: #606266;
  font-size: 16px;
}

.operation-card {
  margin-bottom: 24px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.table-card {
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.operation-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.refresh-btn, .add-btn {
  border-radius: 6px;
  font-weight: 500;
  padding: 0 20px;
  height: 36px;
}

.add-btn {
  background: linear-gradient(90deg, #13c2c2, #1890ff);
  border: none;
}

.statistics {
  display: flex;
  gap: 20px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0f9ff;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  color: #1890ff;
}

.operation-buttons {
  display: flex;
  justify-content: center;
}

.edit-btn {
  background: linear-gradient(90deg, #52c41a, #389e0d);
  border: none;
}

.delete-btn {
  border: none;
}

:deep(.ant-table-thead > tr > th) {
  background-color: #f0f9ff !important;
  font-weight: 600;
  color: #1f2f3d;
}

:deep(.ant-table-row) {
  transition: background-color 0.3s;
}

:deep(.ant-table-row:hover) {
  background-color: #f0f9ff !important;
}

.daily_TrainTicket-modal :deep(.ant-modal-header) {
  border-radius: 10px 10px 0 0;
}

.daily_TrainTicket-modal :deep(.ant-modal-body) {
  padding: 24px;
}

.daily_TrainTicket-modal :deep(.ant-form-item) {
  margin-bottom: 20px;
}

.daily_TrainTicket-modal :deep(.ant-input) {
  border-radius: 6px;
  height: 40px;
}

@media (max-width: 768px) {
  .operation-bar {
    flex-direction: column;
    gap: 15px;
    align-items: flex-start;
  }

  .daily_TrainTicket-container {
    padding: 15px;
  }

  .title {
    font-size: 24px;
  }

  .statistics {
    width: 100%;
    justify-content: flex-start;
  }
}
</style>